<script setup lang="ts">
import { NGrid, NGi, NCollapse, NCollapseItem, NH2 } from "naive-ui";
import { HomeCard, useRouter } from "@ys-lib/naive-ui";
import { usePageData } from "@ys-lib/vue/use";
import { useRouterName } from "../../plugin/router";

const { pageData } = usePageData({
  name: "page.home",
  data: {
    expandNames: ["ts"],
  },
  useLocalStorage: true,
});

const routeName = useRouterName();
const { toName } = useRouter();
const onHomeCardClick = (name: string) => {
  toName(name);
};

const gridCols = "1280:6 4";
</script>

<template>
  <div class="tw-flex tw-justify-center">
    <NCollapse
      class="tw-max-w-screen-2xl"
      v-model:expanded-names="pageData.expandNames"
      default-expanded-names="ts"
    >
      <NCollapseItem name="ts">
        <template #header>
          <NH2 class="tw-m-0">TS样例</NH2>
        </template>
        <NGrid class="tw-py-4" :cols="gridCols" x-gap="16" y-gap="8">
          <NGi>
            <HomeCard
              title="单例"
              @click="onHomeCardClick(routeName.tsInstance)"
            >
            </HomeCard>
          </NGi>
        </NGrid>
      </NCollapseItem>
      <NCollapseItem name="vue">
        <template #header>
          <NH2 class="tw-m-0">VUE 扩展功能</NH2>
        </template>
        <NGrid class="tw-py-4" :cols="gridCols" x-gap="16" y-gap="8">
          <NGi>
            <HomeCard
              title="MQ WebSocket"
              @click="onHomeCardClick(routeName.vueMQWebSocket)"
            >
            </HomeCard>
          </NGi>
        </NGrid>
      </NCollapseItem>
      <NCollapseItem name="naive-ui">
        <template #header>
          <NH2 class="tw-m-0">Naive-UI 扩展功能</NH2>
        </template>
        <NGrid class="tw-py-4" :cols="gridCols" x-gap="16" y-gap="8">
          <NGi>
            <HomeCard
              title="图标"
              @click="onHomeCardClick(routeName.naiveUIIcon)"
            >
            </HomeCard>
          </NGi>
        </NGrid>
      </NCollapseItem>
    </NCollapse>
  </div>
</template>

<style scoped></style>
